<template>
    <div class="template-list" v-loading="loading">
        <el-form :model="modulesList" :rules="rules" ref="modulesList" class="demo-ruleForm" :inline="true">
            <el-form-item label="模板名称" prop="moudleName" required>
                <el-input v-model="modulesList.moudleName" type="input" style="width:150px"></el-input>
            </el-form-item>
            <div v-for="(item, index) in modulesList.activityMoudleDataList" :key="index">
                <el-form :model="item" :rules="rules" :ref="`modulesList-${index}`" :inline="true">
                    <el-form-item label="中奖类型" prop="rewardType" required>
                        <el-select style="width:150px;" v-model="item.rewardType">
                            <el-option v-for="(it, ind) in typeList" :key="ind" :label="it.label" :value="it.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="奖励数量" prop="number" required>
                        <el-input v-model="item.number" type="number" style="width:150px"></el-input>
                    </el-form-item>
                    <el-form-item label="奖励次数" prop="times" required>
                        <el-input v-model="item.times" type="number" style="width:150px" @blur="timeChange(item.times, index)"></el-input>
                    </el-form-item>
                    <el-form-item label="奖励占比" prop="percent" required>
                        <el-input v-model="item.percent" disabled type="input" style="width:150px"></el-input> %
                    </el-form-item>
                    <div class="btn-wrap">
                        <el-button type="primary" @click="addModule(index, 'before')">前插</el-button>
                        <el-button type="primary" @click="addModule(index, 'after')">后插</el-button>
                        <el-button type="primary" @click="delModule(index)">删除</el-button>
                    </div>
                </el-form>
            </div>
            <el-form-item>
                <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            sum: 0,
            modulesList: { // 列表
                activityMoudleDataList: [
                    {
                        rewardType: '',
                        number: '',
                        times: '',
                        percent: ''
                    }
                ]
            },
            typeList: [
                {
                    label: '点券',
                    value: 10
                },
                {
                    label: '碎片',
                    value: 20
                },
                {
                    label: '金币',
                    value: 30
                }
            ],
            rules: {
                moudleName: [
                    { required: true, message: '请填写模板名称', trigger: ['blur', 'change'] }
                ],
                rewardType: [
                    { required: true, message: '请选择中奖类型', trigger: ['blur', 'change'] }
                ],
                number: [
                    { required: true, message: '请填写奖励数量', trigger: ['blur', 'change'] }
                ],
                times: [
                    { required: true, message: '清填写奖励次数', trigger: ['blur', 'change'] }
                ],
                percent: [
                    { required: true, message: '请填写奖励占比', trigger: ['blur', 'change'] }
                ]
            }
        }
    },
    methods: {
        submitForm () {
            if (!this.vilidateForm()) return
            this.$http.post('/lottrey/addMoudle', this.modulesList).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: '模板创建成功'
                    })
                    setTimeout(() => {
                        this.$router.push('/lottery/template')
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        vilidateForm () {
            let flag = true
            this.$refs['modulesList'].validate(valid => {
                if (!valid) {
                    flag = false
                }
            })
            for (let i in this.modulesList.activityMoudleDataList) {
                this.$refs[`modulesList-${i}`][0].validate(valid => {
                    if (!valid) {
                        flag = false
                    }
                })
            }
            return flag
        },
        timeChange (time, index) {
            this.sum += parseInt(time)
            this.modulesList.activityMoudleDataList.map(item => {
                item.percent = (item.times / this.sum * 100).toFixed(2)
            })
        },
        addModule (index, location) {
            let moudleItem = {
                rewardType: '',
                number: '',
                times: '',
                percent: ''
            }
            let ind = location === 'after' ? index + 1 : index
            this.modulesList.activityMoudleDataList.splice(ind, 0, moudleItem)
        },
        delModule (index) {
            this.modulesList.activityMoudleDataList.splice(index, 1)
        }
    }
}
</script>

<style lang="scss" scoped>
    .template-list {
        max-width: 800px;
    }
    .btn-wrap {
        display: inline-block;
        margin-left: 30px;
        .delModule {
            margin-left: 10px;
            cursor: pointer;
        }
    }
</style>
